<template>
  <div class="main">
    <van-row class="van_header_1"></van-row>
    <van-row class="van_header">
      <van-col span="4" class="van_jia">
        <van-icon name="add-o" @click="tianjia" />
      </van-col>
      <van-col span="20">
        <van-row span="24">
          <van-tabs v-model="activeName">
            <van-tab title="关注" to="follow" name="follow"></van-tab>
            <van-tab title="发现" name="found"></van-tab>
            <van-tab title="深圳" to="shenzhen" name="shenzhen"></van-tab>
          </van-tabs>
        </van-row>
      </van-col>
    </van-row>
    <van-row
      class="van_mian"
      :style="{
        borderBottom: index != 0 ? '' : ' 2px solid rgba(73, 73, 73, 0.2)',
      }"
      v-for="(item, index) in datatable"
      :key="index"
    >
      <van-col span="5" class="van-col-left">
        <van-image class="van_images" round :src="item.src" />
      </van-col>
      <van-col span="19" class="van-col-right">
        <van-row>
          <div class="tag_div">{{ item.user }}</div>
        </van-row>
        <van-row>
          <span class="font_span">
            {{ item.title }}
          </span>
        </van-row>
        <van-row>
          <van-col span="7">
            <van-image
              class="van_image_login"
              :src="item.src1"
              title="用户头像"
              alt="图片加载中"
            >
            </van-image>
          </van-col>
          <van-col span="7">
            <van-image
              class="van_image_login"
              :src="item.src1"
              title="用户头像"
              alt="图片加载中"
            >
            </van-image>
          </van-col>
          <van-col span="7">
            <van-image
              class="van_image_login"
              :src="item.src1"
              title="用户头像"
              alt="图片加载中"
            >
            </van-image>
          </van-col>
        </van-row>
        <van-row>
          <span class="span_1"
            >{{ item.time
            }}<span class="span_2" v-if="index == 0"
              ><span @click="dian">点赞</span> | <span>评论</span> </span
            ><span
              class="span_2"
              style="font-size: 25px; font-weight: bold; line-height: 10px"
              v-else-if="index != 0"
              >...
            </span>
          </span>
        </van-row>
        <van-row>
          <van-col class="wenzi">
            <div v-if="index == 0">
              <p class="tibiao">
                <span class="image">
                  <van-icon
                    name="like"
                    :color="colors == 0 ? '' : 'red'"
                    @click="dian()"
                  />
                </span>
                <span>{{ item.user2 }}</span
                >，<span>{{ item.user }}</span>
              </p>
            </div>
            <div>
              <span class="zhi_1">{{ item.user2 }}：</span>
              <span>{{ item.comment1 }}</span>
            </div>
            <div>
              <span class="zhi_1">{{ item.user }}：</span>
              <span>
                {{ item.comment1 }}
              </span>
            </div>
          </van-col>
        </van-row>
      </van-col>
    </van-row>
    <Footer></Footer>
  </div>
</template>
<script>
import Footer from "../../components/Footer/footer.vue";
import {comments} from "../../api/index"
export default {
  name: "",
  data() {
    return {
      colors: 0,
  
      activeName: "found",
      datatable: [
        {
          user: "迪士尼在逃公主",
          user2: "迪士尼玲娜贝儿",
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww1.sinaimg.cn%2Fmw690%2Fa451a749ly1gwv1z8xrfrj20nz0lijt7.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642816508&t=44d59c76c4acc421b37de507bc737cfa",
          title:
            " 我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容......",
          src1: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftc1.yqbimg.net%2Fcms_jfmall%2Fgoodsimg%2Fcms%2Ffile%2F2019_10_22%2FAPP15717087433706100.jpg&refer=http%3A%2F%2Ftc1.yqbimg.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642816865&t=9f198b6194aae07fdf69b89638c39c7c",
          time: "2019.07.20 09:30",
          comment1:
            "我是评论内容，我是评论内容，我是评论内容我是评论内容我是评论内容，我是评论内容，我是评论内容...",
          comment2:
            "我是评论内容，我是评论内容，我是评论内容我是评论内容我是评论内容，我是评论内容，我是评论内容...",
        },
        {
          user: "不高兴就喝水",
          user2: "迪士尼老板米奇",
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinakd20110%2F640%2Fw720h720%2F20211009%2F69ca-a28904653e64e917b992cffacb4252a6.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642816508&t=9eca7cdf07b51e9d2cad9b464f3af621",
          title:
            " 我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容......",
          src1: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqcloud.dpfile.com%2Fpc%2FYLa5kkC3_wAJG-k-mvBqDmNrTmXpCZmMD8tfzrxSBHZAKfd8v_cYdaBtyuCwaBBnTYGVDmosZWTLal1WbWRW3A.jpg&refer=http%3A%2F%2Fqcloud.dpfile.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642816865&t=1138f15e53888e1751e1bad6ef24e664",
          time: "2019.07.20 09:30",
          comment1:
            "我是评论内容，我是评论内容，我是评论内容我是评论内容我是评论内容，我是评论内容，我是评论内容...",
          comment2:
            "我是评论内容，我是评论内容，我是评论内容我是评论内容我是评论内容，我是评论内容，我是评论内容...",
        },
        {
          user: "任同学^^^Andy",
          user2: "海洋饼干",
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww2.sinaimg.cn%2Fmw690%2Fa451a749ly1gwv1z9zhkej20ty0r40wo.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642816508&t=f68b4081f085fe8fe6debb82198d8c2d",
          title:
            " 我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容......",
          src1: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqcloud.dpfile.com%2Fpc%2F_flpQaL91uLP8UzDa1FRE0WO1Z6B9X0VQh4a-wu4nmyvsXpeI3ZZNoWkEjEeuRhzTYGVDmosZWTLal1WbWRW3A.jpg&refer=http%3A%2F%2Fqcloud.dpfile.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642816865&t=9d83a9056872bafa4e2e0b771053da38",
          time: "2019.07.20 09:30",
          comment1:
            "我是评论内容，我是评论内容，我是评论内容我是评论内容我是评论内容，我是评论内容，我是评论内容...",
          comment2:
            "我是评论内容，我是评论内容，我是评论内容我是评论内容我是评论内容，我是评论内容，我是评论内容...",
        },
      ],
    };
  },
  components: {
    Footer,
  },
  created(){
    this.pinlun();
  },
  methods: {
    // 异步请求数据渲染数据
    async gettabledata() {},
    // 异步请求
    async dian() {
      this.colors = 1;
    },
    // 添加
    tianjia() {
      this.$router.push({ path: "/create" }).catch((error) => error);
    },
    // 评论数据
    async pinlun(){
      let obj = {
        targetId:1,
          pagenum:"",
          pagesize:""
      }
      // let res = await comments(obj);
      // console.log(res);
    }
  },
};
</script>
<style scoped lang='less'>
body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  overflow: hidden;
  .van_header_1 {
    width: 100%;
    height: 52.32px;
  }
  .van_header {
    width: 100%;
    height: 52.32px;
    display: flex;
    align-items: center;
    background-color: white;
    position: fixed;
    top: 0;
    z-index: 1;
    .van_jia {
      display: flex;
      justify-content: center;
      margin-left: 5px;
      .van-icon {
        font-size: 20px;
        color: silver;
        font-weight: bold;
      }
    }

    .van-col {
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;

      .van-row {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        .van-tabs {
          width: 100%;
          /deep/.van-tabs__line {
            background-color: rgba(67, 207, 124, 1);
          }
        }
      }
    }
  }
  .van_mian,
  .van_mian_1 {
    height: auto;
    margin-bottom: 10px;
    .van-col-left {
      width: 20%;
      height: 100%;
      display: flex;
      justify-content: center;
      .van_images {
        width: 50px;
        height: 50px;
        margin-top: 5px;
      }
    }
    .van-col-right {
      .van-row {
        display: flex;
        margin: 4px 0;

        .tag_div {
          height: 21px;
          left: 86px;
          top: 67px;
          color: rgba(28, 51, 151, 1);
          font-size: 14px;
          line-height: 15px;
          text-align: left;
        }
        .font_span {
          color: rgba(102, 102, 102, 1);
          font-size: 12px;
          line-height: 16px;
          text-align: left;
          margin-right: 15px;
        }
        .van-col {
          .van_image_login {
            width: 82px;
            height: 82px;
          }
          margin-right: 15px;
        }

        .span_1 {
          width: 150px;
          color: rgba(80, 80, 80, 1);
          font-size: 10px;
          line-height: 25px;
          text-align: left;
          .span_2 {
            position: absolute;
            right: 20px;
            width: 95px;
            height: 22px;
            color: rgba(80, 80, 80, 1);
            background-color: rgba(239, 239, 239, 1);
            border-radius: 16px;
            line-height: 25px;
            text-align: center;
          }
        }
        .wenzi {
          height: auto;
          color: rgba(80, 80, 80, 1);
          font-size: 10px;
          line-height: 18px;
          text-align: left;
          padding: 5px 0 15px 0;
          background-color: rgba(245, 245, 245, 1);
          .zhi_1 {
            height: 15px;
            color: rgba(28, 51, 151, 1);
            background-color: rgba(245, 245, 245, 1);
            font-size: 10px;
            line-height: 18px;
            text-align: left;
          }
          div {
            color: rgba(80, 80, 80, 1);
            font-size: 10px;
            line-height: 18px;
            text-align: left;
            padding: 2.5px 0;
            background-color: rgba(245, 245, 245, 1);
            .tibiao {
              margin: 0;
              border-bottom: 2px solid rgba(80, 80, 80, 0.1);
              .image {
                margin: 0 10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>